import React, { PureComponent } from "react";
import s from "./index.scss";
import { Flex, Icon } from "antd-mobile";
import { callApi } from "app/utils";
import AxFooter from "components/Footer";
import AxHeader from "components/AxHeader";
import bgPng from "assets/images/xjq_bg.png";
import bgChoosePng from "assets/images/xjq_bg_choose.png";
import jxbgPng from "assets/images/jxq_bg.png";
import jxbgChoosePng from "assets/images/jxq_bg_choose.png";
import {hashHistory} from "React-Router"
export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      couponList: {}
    };
    this.itemClick = this.itemClick.bind(this);
  }

  componentDidMount() {
    let couponData
    if(localStorage.getItem('couponId')!=''&&localStorage.getItem('couponId')!=null&&localStorage.getItem('couponId')!=undefined){
      couponData = {
        token: JSON.parse(localStorage.getItem("userData")).token,
        loanId: localStorage.getItem('loanId'),
        amount: localStorage.getItem('amount')
      };
      callApi("/bonus/couponLoad", couponData, "POST").then(data => {
        console.log(data);
        
        let tempList = data.data.couponList.map((item, index) => {
         
          if(item.id==localStorage.getItem('couponId')){
            item.flag = true;
          }else{
            item.flag = false;
          }
          return item;
        });
        console.log(tempList);
        
        this.setState({
          couponList: tempList
        });
      });
    }else{
      couponData = {
        token: JSON.parse(localStorage.getItem("userData")).token,
        loanId: this.props.props.location.query.loanId,
        amount: this.props.props.location.query.amount
      };
      callApi("/bonus/couponLoad", couponData, "POST").then(data => {
        console.log(data);
        
        let tempList = data.data.couponList.map((item, index) => {
          item.flag = false;
          return item;
        });
        console.log(tempList);
        this.setState({
          couponList: tempList
        });
      });
    }
   
   
  }
  itemClick(index,id,type,val1,val2) {
    let tempList = this.state.couponList.map((item, index) => {
      item.flag = false;
      return item;
    });
    this.setState({
      couponList: tempList
    });
    this.state.couponList[index].flag = true;
    if(localStorage.getItem('couponId')!=''&&localStorage.getItem('couponId')!=null&&localStorage.getItem('couponId')!=undefined){
      localStorage.setItem("loanId",localStorage.getItem('loanId'))
      localStorage.setItem("amount",localStorage.getItem('amount'))
      
    }else{
      localStorage.setItem("loanId",this.props.props.location.query.loanId)
      localStorage.setItem("amount",this.props.props.location.query.amount)
    }
    if(type==1){
      localStorage.setItem("val",val1)
    }else{
      localStorage.setItem("val",val2)
    }
    localStorage.setItem("couponId",id)
    localStorage.setItem("type",type)
    hashHistory.push({
      pathname:'/projectList/Detail/payInfo',
    })
    
  }
  //销毁时解绑事件
  componentWillUnmount() {
    //重写组件的setState方法，直接返回空
    this.setState = (state, callback) => {
      return;
    };
  }

  render() {
    let str;
    if (!(JSON.stringify(this.state.couponList) == "{}")) {
      str = this.state.couponList.map((item, index) => {
        return (
        
        <Flex.Item
            key={index}
            className={`${s.item}`}
            onClick={this.itemClick.bind(this, index,item.id,item.type,item.amount,item.increaseRate)}
            style={{
              background: `url(${
               item.type==1? item.flag == true ? bgChoosePng : bgPng :item.flag == true ? jxbgChoosePng : jxbgPng
              }) no-repeat 100% 100%/100%`
            }}
          >
            <Flex.Item className={`${s.content}`}>
                {item.type==1? <div className={`${s.top}`}>
                   <span className={`color26`}><span className={`font24`}>{item.amount}</span>元</span> 现金
                </div>: <div className={`${s.top}`}>
                   <span className={`color26`}><span className={`font24`}>{item.increaseRate}</span>%</span> 加息
                </div>}
               
                <div>
                  <Flex.Item className={`${s.center}`}>
                      {item.desc}
                  </Flex.Item>
                  <Flex.Item className={`${s.bot}`}>
                      有效期至 {item.endTime}
                  </Flex.Item>
                </div>
               
            </Flex.Item>
          </Flex.Item>
        );
      });
    }

    return (
      <div className={`${s.couponBox}`}>
        <div>
          <AxHeader />
          <Flex className={`${s.couponList}`} direction="column">
            {str}
          </Flex>
        </div>

        <AxFooter base={true} />
      </div>
    );
  }
}
